<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2016/12/2
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../../include/head.jsp">
    <jsp:param name="title" value="机床发生idle原因趋势折线图"/>
</jsp:include>

<jsp:include page="../../../include/tenant_header.jsp"/>

<jsp:include page="../../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display:inline-block">机床发生的全部idle原因</h4>
    </section>
    <section class="content" style="min-height:0px">
        <%--折线图选项条--%>
        <div style="width:100%;border:1px solid #cdd9e1;background-color:#fff">
            <div style="width: 100%;border:1px solid #cdd9e1;background-color: #fff;padding-bottom: 20px;">
                <div class="row sie-chart-title">
                    <div class="sie-title-des">机床发生全部IDLE原因</div>
                    <div class="sie-chart-btn">
                        <div style="display: inline-block">
                            <a id="exportSubmit" href="javascript:;" class="hollow-button-green hidden" style="line-height: 2.5;" onclick="exportChartData()"><spring:message code="label.export.data"/></a>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px 15px 15px  50px;">
                    <div class="row">
                        <div class="col-md-2">
                            <label style="min-width: 50px;">类型:</label>
                            <select id="type" class="form-control" style="max-width: 150px;height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">型号:</label>
                            <select id="model" class="form-control" style="max-width: 150px; height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">组:</label>
                            <select id="group" class="form-control" style="max-width: 150px; height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">流水线:</label>
                            <select id="line" class="form-control" style="max-width: 150px;height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <%--<div class="col-md-2">--%>
                            <%--<label style="min-width: 50px;">&nbsp;</label>--%>
                            <%--<a id="search" href="javascript:;" class="solid-button-orange">查找</a>--%>
                        <%--</div>--%>
                    </div>
                </div>
                <div style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;margin-top: 15px">
                    <div style="width: 100%;height: 30px;">
                        <div style="display: inline-block;display: -ms-inline-flexbox;color:#000;font-size:14px;"><spring:message code="label.choice.device"/></div>
                        <div style="display: inline-block;display: -ms-inline-flexbox;">
                            <select id="device" class="form-control" style="max-width:200px;min-width:100px;min-height: 20px;max-height: 30px;padding: 0px 2px;border-radius:5px;"
                                    onchange="deviceChange(this,'sddr')">

                            </select>
                        </div>
                    </div>
                </div>

                <div id="chartContainer"  class="hidden" style="width: 100%;padding: 10px 0 10px 50px;line-height: 2.4;display: -webkit-box;color: white;font-size: 12px;">
                    <a href="javascript:;" class="sie-date-btn btn-selector" id="sddr_week" onclick="changeDate(this)">
                        <spring:message code="label.one.week"/>
                    </a>
                    <a href="javascript:;" class="sie-date-btn" id="sddr_month" onclick="changeDate(this)">
                        <spring:message code="label.one.month"/>
                    </a>
                    <a href="javascript:;" class="sie-date-btn" id="sddr_year" onclick="changeDate(this)">
                        <spring:message code="label.one.year"/>
                    </a>

                    <div style="display: inline-block;display: -ms-inline-flexbox;">
                        <div class="sie-calendar-parent">
                            <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker" placeholder="<spring:message code="label.start.time"/>" id="sddr_start_time">
                            <img src="/images/calendar.png" class="sie-calendar-img">
                        </div>
                        <div class="sie-calendar-parent">
                            <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker" placeholder="<spring:message code="label.end.time"/>" id="sddr_end_time">
                            <img src="/images/calendar.png" class="sie-calendar-img">
                        </div>
                        <a href="javascript:;"
                           style="width: 50px;height: 30px;line-height:34px;margin-left: 15px;border-radius: 5px;color:#fff;background-color: #41aaaa;display: inline-block;text-align: center;"
                           id="sddr_date_submit" onclick="sameDeviceDiffReasonLineChart(this)">
                            <span><spring:message code="label.admin.confirm"/></span>
                        </a>
                    </div>
                </div>
                <div id="sameDeviceDiffReasonLineChat" style="padding: 20px 20px 0 20px;">
                </div>
                <div id="rangeSelector" style="padding: 0 20px 20px 20px;">

                </div>
            </div>
        </div>
    </section>
</div>

<jsp:include page="../../../include/foot.jsp"/>
<script src="/../js/dx.all.js"></script>
<script src="/../js/charts.js"></script>

<script>

    var exportData={};
    $(document).ready(function () {
        $("#sddr_start_time").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate:new Date("2016-11-01"),
            endDate:new Date(dateAddSubtract(new Date(),-1)),
            todayHighlight:true
        }).on('changeDate',function(ev){
            $("#sddr_end_time").datepicker('setStartDate',ev.date)
        });

        $("#sddr_end_time").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate:new Date("2016-11-01"),
            endDate:new Date(dateAddSubtract(new Date(),-1)),
            todayHighlight:true
        }).on('changeDate',function(ev){
            $("#sddr_start_time").datepicker('setEndDate',ev.date)
        });
        bindDateInputClickEvent();
        //获取租户所有设备
        loadChartHeaders();
        searchClick();
//        $("#search").click(function(){
//            searchClick();
//        });
        <%--findAllDeviceForChart('<spring:message code="label.loading"/>','<spring:message code="label.select"/>');--%>
    });

    function deviceChange(dom, prefix) {
        $("#exportSubmit").addClass("hidden");
        $(".btn-selector").removeClass("btn-selector");
        $("#sddr_week").addClass("btn-selector");

        $("#sddr_start_time").val(dateFormat(dateAddSubtract(new Date(),-7)));
        $("#sddr_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
        $("#sddr_start_time").datepicker('update');
        $("#sddr_end_time").datepicker('update');
        createSameDeviceDiffReasonLineChart([], []);

        if ($("#device").find("option:selected").data("option") == 'first') {
            $("#chartContainer").addClass("hidden");
            return;
        }
        $("#chartContainer").removeClass("hidden");
        sameDeviceDiffReasonLineChart(this);
    }

    function changeDate(dom){
        $("#exportSubmit").addClass("hidden");
        $(".btn-selector").removeClass("btn-selector");
        $(dom).addClass("btn-selector");

        if(dom.id == "sddr_week"){
            $("#sddr_start_time").val(dateFormat(dateAddSubtract(new Date(),-7)));
            $("#sddr_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#sddr_start_time").datepicker('update');
            $("#sddr_end_time").datepicker('update');
        }else if(dom.id == "sddr_month"){
            $("#sddr_start_time").val(dateFormat(dateAddSubtract(new Date(),-30)));
            $("#sddr_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#sddr_start_time").datepicker('update');
            $("#sddr_end_time").datepicker('update');
        }else if(dom.id == "sddr_year"){
            $("#sddr_start_time").val(dateFormat(dateAddSubtract(new Date(),-365)));
            $("#sddr_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#sddr_start_time").datepicker('update');
            $("#sddr_end_time").datepicker('update');
        }
        sameDeviceDiffReasonLineChart(dom);
    }

    //获取数据：同机床不同原因(折线)   param:startTime endTime device
    function sameDeviceDiffReasonLineChart(dom) {
        $("#exportSubmit").addClass("hidden");
        if($("#sddr_start_time").val() == "" || $("#sddr_end_time").val()==""){
            swal({
                title:"<spring:message code="label.warning"/>",
                text:'<spring:message code="label.please.choice.date"/>',
                type:"warning",
                showCancelButton:false,
                showConfirmButton:true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation:"slide-from-top"
            },function(){
                $("#exportSubmit").addClass("hidden");
                createSameDeviceDiffReasonLineChart([], []);
                return;
            });
        }
        if(dom.id == "sddr_date_submit"){
            $(".btn-selector").removeClass("btn-selector");
        }

        var data = {};

        //获取开始时间和结束时间
        data["startTime"] = $("#sddr_start_time").val();
        data["endTime"] = $("#sddr_end_time").val();

        data["device"] = $("#device").find("option:selected").data("id");
        exportData=data;
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/partner/{tenant}/api/v1/getSameDeviceDiffReason".replace("{tenant}", getKeyByUrl()),    //'/api/v1/getSameDeviceDiffTypeTime',
                type: "get",
                data: data,
                success: function (data) {
                    if (data.result != "SUCCESS") {
                        createSameDeviceDiffReasonLineChart([], []);
                        return;
                    }
                    if (Object.keys(data.data).length == 0) {
                        createSameDeviceDiffReasonLineChart([], []);
                        return;
                    }
                    var series = [];
                    var idleInfo = data.data.idleInfo;
                    var reasonList = data.data.reasonList;
                    for (var i = 0; i < reasonList.length; i++) {
                        var serie = {};
                        for (var j = 0; j < idleInfo.length; j++) {
                            if (!(reasonList[i] in idleInfo[j])) {
                                idleInfo[j][reasonList[i]] = 0;
                            }
                        }
                        serie["valueField"] = reasonList[i];
                        serie["name"] = reasonList[i];
                        series.push(serie);
                    }
                    createSameDeviceDiffReasonLineChart(idleInfo, series);
                    $("#exportSubmit").removeClass("hidden");
                    dtd.resolve();
                }
            });
        });
    }

    function exportChartData(){
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/partner/{tenant}/api/v1/export/sameDeviceDiffReasonExport".replace("{tenant}", getKeyByUrl()),
                type: "get",
                data: exportData,
                success: function (result) {
                    if (result.data == null || result.data == "" || result.data == undefined) {
                        dtd.resolve();
                    } else {
                        dtd.resolve();
                        window.location.href = "/api/v1/excel/get?name=" + result.data;
                    }
                },
                error: function (e) {
                    dtd.resolve();
                    console.log(e);
                }
            });
        });
    }
</script>